<%--
  Created by IntelliJ IDEA.
  Car: XBB
  Date: 2021/2/18
  Time: 14:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuicms/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuicms/css/public.css" media="all" />
</head>
<body>
<div style="padding: 10px">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>查询条件</legend>
    </fieldset>
    <form  class="layui-form">
        <div class="layui-form-item">
            <div class="layui-form-item">
                <label class="layui-form-label">车牌号</label>
                <div class="layui-input-inline">
                    <input type="text" name="carNumber"   placeholder="请输入身份证号" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">汽车种类</label>
                <div class="layui-input-inline">
                    <input type="text" name="carType"   placeholder="请输入汽车种类" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">汽车颜色</label>
                <div class="layui-input-inline">
                    <input type="text" name="color"   placeholder="请输入汽车颜色" autocomplete="off" class="layui-input">
                </div>
                
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">汽车价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price"   placeholder="请输入汽车价格" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">相关描述</label>
                <div class="layui-input-inline">
                    <input type="text" name="description"   placeholder="请输入汽车相关描述" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">是否出租</label>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="radio" name="isRenting" value="1" title="已出租">
                        <input type="radio" name="isRenting" value="0" title="未出租">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: right">
                <button  class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm" lay-submit lay-filter="doSearch">查询
                </button>
                <button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm">重置
                </button>
            </div>
        </div>
    </form>

    <table id="carTable" lay-filter="carTableFilter"></table>
</div>

<script id="toolbarcar" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="carAdd">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteSome">批量删除</button>
    </div>
</script>

<script id="barcar" type="text/html">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="viewImg">查看大图</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form layui-row layui-col-space10" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-col-md12 layui-col-xs12">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md9 layui-col-xs7">
                    <div class="layui-form-item magt3">
                        <label class="layui-form-label">车牌号</label>
                        <div class="layui-input-block">
                            <input type="text" name="carNumber" id="carNumberInput" class="layui-input" lay-verify="required" placeholder="请输入车牌号">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">汽车类型</label>
                        <div class="layui-input-block">
                            <input type="text" name="carType" class="layui-input" lay-verify="required" placeholder="请输入汽车类型">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">颜色:</label>
                        <div class="layui-input-block">
                            <input type="text" name="color" placeholder="请输入汽车颜色" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-xs5">
                    <div class="layui-upload">
                        <div class="layui-upload-list thumbBox mag0 magt3" id="carImgDiv">
                            <%--显示上传的图片--%>
                            <img class="layui-upload-img thumbImg" id="showCarImg" src="${pageContext.request.contextPath}/static/images/default.jpg" style="width:156px;height:150px">
                            <%--保存当前显示图片的地址--%>
                            <input type="hidden" name="carImg" id="carImg">
                        </div>
                    </div>

                </div>
            </div>
            <div class="layui-form-item magb0">
                <div class="layui-inline">
                    <label class="layui-form-label">价格:</label>
                    <div class="layui-input-block">
                        <input type="text" name="price" placeholder="请输入汽车价格" lay-verify="required|number" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">出租价格:</label>
                    <div class="layui-input-block">
                        <input type="text" name="rentPrice" placeholder="请输入出租价格" lay-verify="required|number" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">押金:</label>
                    <div class="layui-input-block">
                        <input type="text" name="deposit" placeholder="请输入出租押金" lay-verify="required|number" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item magb0">
                <label class="layui-form-label">相关描述:</label>
                <div class="layui-input-block">
                    <input type="text" name="description" placeholder="请输入相关描述" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item magb0">
                <label class="layui-form-label">是否出租:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="isRenting" value="1"  title="已出租">
                    <input type="radio" name="isRenting" value="0" checked="checked" title="未出租">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius" lay-filter="doSubmit" lay-submit="">&nbsp; 提交</button>
                    <button type="reset" class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">&nbsp; 重置</button>
                </div>
            </div>
        </div>
    </form>
</div>

<%--查看大图弹出的层开始--%>
<div id="viewCarImageDiv" style="display: none;text-align: center">
    <img alt="车辆图片" width="1000px" height="600px" id="view_carimg">
</div>


<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>

    var carTab;
    var carIndex;
    var title;

    layui.use(['form','layer','jquery','table','upload'],function() {
        var form = layui.form, layer = layui.layer, $ = layui.jquery,table = layui.table,upload = layui.upload;

        carTab = table.render({
            elem:"#carTable"
            ,url:"${pageContext.request.contextPath}/business/car/carRightJson"
            ,cols:[[
                {type:'checkbox'}
                ,{field:'carNumber',title:'车牌号',align:"center",sort:true}
                ,{field:'carType',title:'汽车类型',align:"center"}
                ,{field:'color',title:'颜色',align:"center"}
                ,{field:'price',title:'购买价格',align:"center"}
                ,{field:'rentPrice',title:'出租价格',align:"center"}
                ,{field:'deposit',title:'押金',align:"center"}
                ,{field:'isRenting',title:'是否出租',align:"center",templet:function (r) {
                        return r.isRenting == 1 ? "已出租":"未出租";
                    }}
                ,{field:'description',title:'相关描述',align:"center"}
                ,{field:'carImg',title:'汽车图片',align:"center"}
                ,{field:'createTime',title:'创建时间',align:"center"}
                ,{fixed:'right',title:'操作',align:"center",toolbar:'#barcar',minWidth:200}
            ]]
            ,toolbar:'#toolbarcar'
            ,page:true
            ,limit:[5,10,15]
            ,limit:5
        })

        //给查询按钮添加事件
        form.on('submit(doSearch)',function (data) {

            carTab.reload({
                where:data.field
                ,page:{curr:1}
            })

            return false;
        })

        //监听头部工具栏
        table.on('toolbar(carTableFilter)',function (obj) {
            if(obj.event == "carAdd"){
                carAdd()
            }else if(obj.event == "deleteSome"){
                //获取选中的行
                var checkStatus = table.checkStatus(obj.config.id)
                if(checkStatus.data.length == 0){
                    layer.msg("至少选择一行数据")
                    return false
                }
                //获取所有选中的carId
                var str = ""
                for(var i = 0;i<checkStatus.data.length;i++){
                    var car = checkStatus.data[i];
                    str += car.carNumber + ","
                }
                deleteSome(str,checkStatus.data.length)
            }
        })

        function deleteSome(str,count) {
            layer.confirm("您确定要删除这"+count+"条数据吗？",{icon:2,title:'批量删除'},function(i){
                $.post("${pageContext.request.contextPath}/business/car/deleteSomeCar",{"carIds":str},function(r){
                    if(r.code == 0){
                        //删除成功
                        layer.msg(r.msg, {
                            offset: '15px'
                            ,icon: 1
                            ,time: 1000
                        }, function(){
                            // 刷新table
                            carTab.reload({
                                page:{curr:1}
                            })
                        });
                    }else{
                        //删除失败
                        layer.msg(r.msg)
                    }
                })
            })
        }

        //点击添加按钮的弹出
        function carAdd() {
            carIndex = layer.open({
                type:1
                ,title:"添加汽车"
                ,area:['700px','500px']
                ,content:$('#saveOrUpdateDiv')
            })
            //清除表单的内容
            $("#dataFrm").get(0).reset()
            $("#carNumber").val("")

            $('#showCarImg').attr('src',"${pageContext.request.contextPath}/static/images/default.jpg");
            form.render()
            title = "添加"

            $("#carNumberInput").removeClass("layui-disabled")
        }

        //给弹出层的form表单submit按钮添加点击事件
        form.on('submit(doSubmit)',function (obj) {
            layer.confirm("您确定要"+title+"吗？",function () {
                $.post("${pageContext.request.contextPath}/business/car/carAddOrUpdate",obj.field,function (r) {
                    if(r.code == 0){
                        layer.msg(r.msg,{
                            offset:'15px'
                            ,icon:1
                            ,time:1000
                        },function () {
                            //关闭当前弹出框
                            layer.close(carIndex)
                            //刷新table
                            carTab.reload({
                                page:{curr:1}
                            })
                        });
                    }else{
                        layer.msg(r.msg)
                    }

                })
            })
            return false;
        })

        //监听行工具栏
        table.on('tool(carTableFilter)',function (obj) {
            if(obj.event == "edit"){
                edit(obj.data)
            }else if(obj.event == "del"){
                del(obj.data)
            }else if(obj.event == "viewImg"){
                viewImg(obj.data)
            }
        })

        //点击编辑
        function edit(data) {
            carIndex = layer.open({
                type:1
                ,title:"修改汽车"
                ,area:['700px','500px']
                ,content:$('#saveOrUpdateDiv')
            })

            form.val('dataFrm',data)
            $('#showCarImg').attr("src",data.carImg);
            form.render()
            //给表单设置值
            $("#carNumberInput").attr("disabled",true).addClass("layui-disabled")
            title = "修改"
        }

        //点击删除
        function del(data){
            layer.confirm("确定删除"+data.carName+"吗？",function (i) {
                $.post("${pageContext.request.contextPath}/business/car/carDelete",{"id":data.carNumber},function (r) {
                    if(r.code == 0){
                        layer.msg(r.msg,{
                            offset:'15px'
                            ,icon:1
                            ,time:1000
                        },function () {
                            //关闭当前弹出框
                            layer.close(carIndex)
                            //刷新table
                            carTab.reload({
                                page:{curr:1}
                            })
                        });
                    }else{
                        layer.msg(r.msg)
                    }

                })
            })
        }

        function viewImg(data){
            roleIndex = layer.open({
                type:1
                ,title:"图片"
                ,area:['1040px','650px']
                ,content:$('#viewCarImageDiv')
                ,success:function(index){
                    $("#view_carimg").attr("src",data.carImg)
                }
            })
        }

        //上传图
        upload.render({
            elem: '#carImgDiv',
            url: '${pageContext.request.contextPath}/file/uploadFile',
            method : "post",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
            acceptMime:"images/*",
            field:"mf",
            done: function(res, index,upload){
                $('#showCarImg').attr('src',res.data.src);
                $('#carImg').val(res.data.src)
            }
        });

    })
</script>
</body>
</html>

